<template>
  <view class="pox">
    <view class="dayList">
      <uv-scroll-list :indicator="false">
        <view class="cell">
          <view class="item" :class="{ active: current == item.date }" v-for="(item, index) in timeList" :key="index" @click="onTab(item)">
            <view class="days">{{ item.day }}</view>
            <view class="week">{{ item.week }}</view>
          </view>
        </view>
      </uv-scroll-list>
    </view>
    <view class="playback">
      <view class="item" v-for="(item,index) in liveList2" :key="index" @click="goDetail(item)">
        <view class="icon">
          <image :src="setUrl(item.thumb)" mode="aspectFill" class="img"></image>
          <text class="test">{{ statusType[item.status] }}</text>
        </view>
        <view class="right">
          <view class="title">{{ item.title }}</view>
          <view class="desc" v-if="item.promoter">{{ item.promoter.nickname }}</view>
          <view class="last">
            <view class="backs">{{ formatTimeData(item.start_at) }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bigTitle">课程回顾</view>
    <view class="listBack">
      <view class="item" v-for="(item, index) in liveList" :key="index" @click="goDetail(item)">
        <view class="icon">
          <image :src="setUrl(item.thumb)" mode="aspectFill" class="img"></image>
          <view class="overlay"></view>
          <view class="title">{{ item.title }}</view>
        </view>
        <view class="user" v-if="item.promoter">
          <view class="left">
            <avatar :src='setUrl(item.promoter.avatar)' styles="width: 54rpx;height: 54rpx;"></avatar>
            <view class="name">{{ item.promoter.nickname }}</view>
          </view>
          <view class="time">{{ item.start_at }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get } from '@/api';
import { setUrl, formatTimeData } from '@/common';

let timeList = getNextSevenDays();
let current = ref(getNextSevenDays()[0].date);
let liveList = ref([]);
let liveList2 = ref([]);
let statusType = ref({
  2:"预告",
  3:"直播中",
})

onLoad(() => {
  getList();
  getList2();
})

function getList(){
  const params = {
    pagePer: 30,
    page: 1
  }
  get('/api/Live/getPaybackList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      liveList.value = data.data;
    }
  })
}
function getList2(){
  const params = {
    pagePer: 30,
    page: 1,
    filterDate: current.value
  }
  get('/api/Live/getLiveList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      liveList2.value = data.data;
    }
  })
}
function onTab(row){
  if(row.date == current.value) return;
  current.value = row.date;
  getList2();
}
function getNextSevenDays() {
  const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

  const today = new Date();
  const result = [];

  for (let i = 0; i < 7; i++) {
    const date = new Date(today);
    date.setDate(today.getDate() + i);
    
    const dayOfWeek = days[date.getDay()];
    const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;

    result.push({ date: formattedDate, week: dayOfWeek, day: `${date.getDate()}日` });
  }

  return result;
}
function goDetail(row){
  uni.navigateTo({
    url: `/pages/research/liveDetail?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .pox{
    width: 100%;
    padding: 0 30rpx;
    .listBack{
      .item{
        margin-bottom: 40rpx;
        .user{
          width: 100%;
          padding-top: 30rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left{
            display: flex;
            align-items: center;
            .name{
              font-weight: 400;
              font-size: 26rpx;
              color: #000000;
              padding-left: 20rpx;
            }
          }
          .time{
            font-weight: 400;
            font-size: 26rpx;
            color: #6C6C6C;
          }
        }
        .icon{
          width: 100%;
          height: 400rpx;
          border-radius: 8rpx;
          overflow: hidden;
          position: relative;
          .title{
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 0 30rpx;
            padding-bottom: 30rpx;
            width: 100%;
            z-index: 3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .overlay{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0) 100%);
          }
        }
      }
    }
    .bigTitle{
      font-weight: 500;
      font-size: 32rpx;
      color: #2B2B2B;
      padding-top: 60rpx;
      padding-bottom: 30rpx;
    }
    .playback{
      width: 100%;
      padding-top: 40rpx;
      .item{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 80rpx;
        &:last-child{
          margin-bottom: 0;
        }
        .right{
          flex: 1;
          width: 0;
          padding-left: 24rpx;
          height: 171rpx;
          position: relative;
          .toPlay{
            width: 118rpx;
            height: 60rpx;
            line-height: 60rpx;
            background: #ff484514;
            border-radius: 15rpx;
            border: 1px solid #FF3B38;
            font-weight: 500;
            font-size: 26rpx;
            color: #FF3B38;
            text-align: center;
            position: absolute;
            right: 0;
            bottom: 0;
          }
          .last{
            display: flex;
            align-items: center;
            position: absolute;
            left: 24rpx;
            bottom: 0;
            height: 60rpx;
            .backs{
              font-weight: 400;
              font-size: 24rpx;
              color: #000000;
              padding-right: 26rpx;
            }
            .look{
              font-weight: 400;
              font-size: 24rpx;
              color: #000000;
            }
          }
          .desc{
            font-weight: 400;
            font-size: 24rpx;
            color: #686868;
            padding-top: 12rpx;
          }
          .title{
            font-weight: 400;
            font-size: 28rpx;
            color: #000000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .icon{
          position: relative;
          width: 282rpx;
          height: 171rpx;
          border-radius: 10rpx;
          overflow: hidden;
          .test{
            width: 97rpx;
            height: 45rpx;
            line-height: 45rpx;
            background: rgba(0, 0, 0, .47);
            border-radius: 8rpx;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: 0;
            font-weight: 400;
            font-size: 24rpx;
            color: #FFFFFF;
          }
        }
      }
    }
    .dayList{
      width: 100%;
      .cell{
        display: flex;
        align-items: center;
        .item{
          width: 184rpx;
          height: 108rpx;
          padding: 0 16rpx;
          background-image: linear-gradient(151deg, #ffffff30 2%, #ffffffad 100%);
          border-radius: 18rpx;
          margin-right: 8rpx;
          display: flex;
          flex-direction: column;
          &.active{
            background-image: linear-gradient(151deg, #ffffff30 2%, #ff8c8c66 100%);
          }
          .days{
            flex: 1;
            border-bottom: 1px solid #FFFFFF;
            color: #ffffff;
            font-size: 26rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .week{
            flex: 1;
            font-weight: 400;
            font-size: 26rpx;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
</style>